<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录确认</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-container style="height: 100vh; display: flex; justify-content: center; align-items: center;">
            <el-card style="width: 400px;">
                <h2 style="text-align: center; margin-bottom: 30px;">用户登录确认</h2>
                <el-form :model="loginForm" ref="loginForm">
                    <el-form-item prop="country_code" label="国际区号">
                        <el-input disabled
                            v-model="loginForm.country_code">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="phone_num" label="手机号">
                        <el-input disabled
                            v-model="loginForm.phone_num">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="check_code" label="验证码">
                        <el-input disabled
                            v-model="loginForm.check_code">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            style="width: 100%;"
                            @click="login"
                            :loading="loading">
                            获取验证码
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-container>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    loading: false,
                    loginForm: {
                        country_code: '',
                        phone_num: '',
                        check_code: ''
                    }
                }
            },
            created() {
                const path = window.location.pathname
                const code = path.split('/')[2]
                axios.post('/search_by_code', {'code': code})
                .then(res => {
                    console.log(res.data)
                    this.loginForm.phone_num = res.data.phone_num;
                    this.loginForm.country_code = res.data.country_code
                })
            },
            methods: {
                login() {
                    axios.post('/call_check_code', this.loginForm)
                    .then(res => {
                        const data = res.data.check_code
                        if (data === null) {
                            this.$message({
                              message: '未获取验证码，稍后重试',
                              type: 'warning'
                            });
                            return
                        }
                        this.loginForm.check_code = res.data.check_code
                    })
                }
            }
        });
    </script>
</body>
</html>